<template>
  <div>
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="代理商提现" key="1">
        <a-card>
          <a-form :form="form">
            <a-row :gutter="30">
              <a-col :span="8">
                <a-form-item
                  label="代理商名称"
                  :label-col="{ span: 7 }"
                  :wrapper-col="{ span: 16,offset:1 }"
                >
                  <a-input placeholder="请输入" v-decorator="['workNumber']" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="工单号"
                  :label-col="{ span: 6}"
                  :wrapper-col="{ span: 16, offset: 1}"
                >
                  <a-input placeholder="请输入" v-decorator="['workNum']" />
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item
                  label="处理状态"
                  :label-col="{ span: 6}"
                  :wrapper-col="{ span: 16, offset: 1}"
                >
                  <a-select style="width:100%" v-decorator="['activationStatus']" placeholder="全部">
                    <a-select-option value>全部</a-select-option>
                    <a-select-option :value="1">待审核</a-select-option>
                    <a-select-option :value="2">审核通过</a-select-option>
                    <a-select-option :value="3">打款成功</a-select-option>
                    <a-select-option :value="4">审核未通过</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-item
                  label="申请时间"
                  :label-col="{ span: 6}"
                  :wrapper-col="{ span: 16, offset: 1}"
                >
                  <a-range-picker
                    style="width: 100%"
                    v-decorator="['rangeConfig']"
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ textAlign: 'right' }">
                <a-button type="primary" @click="search($event)">查询</a-button>
                <a-button type="dashed" style="margin: 0 2%" @click="AgentExport()">导出</a-button>
                <a-button @click="handleReset()">重置</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-card>

        <!-- //图片的模块 -->
        <a-card style="margin-top:2%;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="9">
                    <img src="../../assets/代理商收入.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">代理商收入总额：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >{{ this.agentInAmount }}</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="9">
                    <img src="../../assets/总部分润.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">可提现金额：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >{{ this.accountBalance }}</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="9">
                    <img src="../../assets/合作方分润.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">已提现金额：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >{{ this.settledAmount }}</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
        <!-- //图片的模块 -->

        <!-- //表格模块 -->
        <a-card style="margin-top:2%;">
          <a-table
            :columns="columns"
            :dataSource="data"
            :pagination="pagination"
            @change="handleTableChange"
            :bordered="true"
            :rowKey="record => record.id"
          >
            <template slot="operatea" slot-scope="text,record">
              <div>
                <span
                  class="green"
                  @click="record.status==1?showDetails(text,record):record.status==2?showRemit(text, record):''"
                >{{record.status==1?'通过':record.status==2?'已打款':''}}</span>
                <span
                  class="red"
                  @click="record.status==4?'':refuseModal(text,record)"
                >{{record.status==1?"拒绝":""}}</span>
              </div>
            </template>
            <template slot="handlestatus" slot-scope="text,record">
              <span>{{ record.status==1?"待审核":record.status==2?"审核通过":record.status==3?"打款成功":record.status==4?"审核未通过":''}}</span>
            </template>
          </a-table>
        </a-card>
        <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel">
          <a-form :form="form">
            <a-form-item label :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
              <a-textarea
                style="width:100%;height:230px"
                placeholder="请输入拒绝原因"
                v-decorator="['reason']"
                :autosize="{ minRows: 2, maxRows: 4, }"
              />
            </a-form-item>
          </a-form>
        </a-modal>
        <!-- //表格模块 -->
      </a-tab-pane>
      <!-- 合作方提现模块 -->

      <a-tab-pane tab="合作方提现" key="2">
        <a-card>
          <a-form :form="form">
            <a-row :gutter="30">
              <a-col :span="8">
                <a-form-item
                  label="合作方名称"
                  :label-col="{ span: 7 }"
                  :wrapper-col="{ span: 16,offset:1 }"
                >
                  <a-input placeholder="请输入" v-decorator="['workNumber']" />
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item
                  label="工单号"
                  :label-col="{ span: 6}"
                  :wrapper-col="{ span: 16, offset: 1}"
                >
                  <a-input placeholder="请输入" v-decorator="['workNum']" />
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item
                  label="处理状态"
                  :label-col="{ span: 6}"
                  :wrapper-col="{ span: 16, offset: 1}"
                >
                  <a-select style="width:100%" v-decorator="['auditStatus']" placeholder="全部">
                    <a-select-option value>全部</a-select-option>
                    <a-select-option :value="1">待审核</a-select-option>
                    <a-select-option :value="2">审核通过</a-select-option>
                    <a-select-option :value="3">打款成功</a-select-option>
                    <a-select-option :value="4">审核未通过</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-item
                  label="申请时间"
                  :label-col="{ span: 6}"
                  :wrapper-col="{ span: 16, offset: 1}"
                >
                  <a-range-picker
                    style="width: 100%"
                    v-decorator="['rangeConfig']"
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ textAlign: 'right' }">
                <a-button type="primary" @click="partsearch($event)">查询</a-button>
                <a-button type="dashed" style="margin: 0 2%" @click="partExport()">导出</a-button>
                <a-button @click="handleReset()">重置</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <!-- Middle图片模块 -->
        <a-card style="margin-top:2%;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="9">
                    <img src="../../assets/代理商收入.png" alt />
                  </a-col>

                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">合作方分润总额：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >{{ this.partnerInAmount }}</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>

            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="9">
                    <img src="../../assets/总部分润.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">可提现金额</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >{{ this.accountBalance }}</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>

            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="9">
                    <img src="../../assets/合作方分润.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">已提现金额：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle" />
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >{{ this.settledAmount }}</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
        <!-- Middle图片模块 -->

        <!-- 表格模块 -->
        <a-card style="margin-top:2%;">
          <a-table
            :columns="columnss"
            :dataSource="dataa"
            :pagination="pagination"
            @change="handleTableChangetwice"
            :rowKey="record => record.id"
            :bordered="true"
          >
            <template slot="operationb" slot-scope="text,record">
              <span class="green" @click="pass(text,record)">{{record.status==2?'已打款':''}}</span>
            </template>
            <template slot="handlestatus" slot-scope="text,record">
              <span>{{ record.status==1?"待审核":record.status==2?"审核通过":record.status==3?"打款成功":record.status==4?"审核未通过":''}}</span>
            </template>
          </a-table>
        </a-card>

        <!-- 表格模块 -->
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
const columnss = [
  {
    title: "申请时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "工单号",
    dataIndex: "workOrderCode",
    scopedSlots: { customRender: "userType" },
    align: "center"
  },
  {
    title: "合作方名称",
    dataIndex: "partnerName",
    scopedSlots: { customRender: "workOrderNumber" },
    align: "center"
  },
  {
    title: "处理状态",
    dataIndex: "handlestatus",
    scopedSlots: { customRender: "handlestatus" },
    align: "center"
  },
  {
    title: "收款账户",
    dataIndex: "receivingAccount",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "提现总金额",
    dataIndex: "workOrderAmount",
    scopedSlots: { customRender: "entryValueSum" },
    align: "center"
  },
  {
    title: "提现手续费",
    dataIndex: "serviceCharge",
    scopedSlots: { customRender: "wechatAmount" },
    align: "center"
  },

  {
    title: "操作",
    dataIndex: "operationb",
    scopedSlots: { customRender: "operationb" },
    align: "center"
  }
];
const columns = [
  {
    title: "申请时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "工单号",
    dataIndex: "workOrderCode",
    scopedSlots: { customRender: "userType" },
    align: "center"
  },
  {
    title: "代理商名称",
    dataIndex: "agentName",
    scopedSlots: { customRender: "workOrderNumber" },
    align: "center"
  },
  {
    title: "处理状态",
    dataIndex: "handlestatus",
    scopedSlots: { customRender: "handlestatus" },
    align: "center"
  },

  {
    title: "收款账户",
    dataIndex: "receivingAccount",
    // scopedSlots: { customRender: "entryValueSum" },
    align: "center"
  },
  {
    title: "提现总金额",
    dataIndex: "workOrderAmount",
    scopedSlots: { customRender: "wechatAmount" },
    align: "center"
  },
  {
    title: "提现手续费",
    dataIndex: "serviceCharge",
    scopedSlots: { customRender: "alipayAmount" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operatea" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];
const dataa = [
  {
    key: "1"
  }
];

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      columnss,
      dataa: [],
      partnerInAmount: "",
      visible: false,
      accountBalance: "",
      agentInAmount: "",
      settledAmount: "",
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      }
    };
  },
  methods: {
    handleReset() {
      this.form.resetFields();
      this.startTime="";
      this.endTime="";
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
     
      this.search();
    },
    handleTableChangetwice(pagination, filters, sorter) {
      const pager = { ...this.paginationtwice };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.paginationtwice = pager;
   
      this.partsearch();
    },
    callback(key) {
      if (key) {
        this.handleReset();
      }
      if (key == 1) {
        this.search();
      }
      if (key == 2) {
        this.partsearch();
      }
    },
    pass(text, record) {
      var that = this;
      this.updatePartnerId = record.id;
      this.$confirm({
        title: "确认打款",
        content: "确定已经将提现金额成功打款到该代理账户了？",
        onOk() {
          that.updatePartner();
        },
        onCancel() {}
      });
    },

    showDetails(text, record) {
      console.log(record);
      var that = this;
      this.withdrawCashId = record.id;
      this.$confirm({
        title: "审核通过",
        content: `确定要通过 ${record.agentName} 的这次提现申请吗？`,
        onOk() {
          that.auditWithDrawCash(that.withdrawCashId);
        },
        onCancel() {}
      });
    },

    // 已打款弹窗
    showRemit(text, record) {
      console.log(record);
      var that = this;
      this.updateWithdrawCashId = record.id;
      this.$confirm({
        title: "确认打款",
        content: `确定已经将提现金额成功打款到该代理商账户了吗？`,
        onOk() {
          that.updateWithdrawCash();
        },
        onCancel() {}
      });
    },

    handleOk(e) {
      this.visible = false;
      this.refuseCash();
    },
    handleCancel(e) {
      this.visible = false;
    },
    refuseModal(text, record) {
      console.log(record);
      this.visible = true;
      this.refuseCashId = record.id;
    },

    //代理商提现
    search($event) {
      if($event){
        this.pagination.current=1
      }
      var values = this.form.getFieldsValue();
      //对时间进行判断一下
      if (values.rangeConfig == undefined) {
        values.rangeConfig == undefined;
      } else {
        this.startTime = this.$moment(values.rangeConfig[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = this.$moment(values.rangeConfig[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/financial/findAgentWithDrawCashPageList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          endTime: this.endTime,
          startTime: this.startTime,
          agentName: values.workNumber,
          status: values.activationStatus,
          workOrderCode: values.workNum,
          type: 2
        })
        .then(response => {
          console.log(response.data.data);
          this.data = response.data.data.t.list;
          this.accountBalance = response.data.data.t.accountBalance;
          this.agentInAmount = response.data.data.t.agentInAmount;
          this.settledAmount = response.data.data.t.settledAmount;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 合作方提现审核--通过
    auditWithDrawCash(withdrawCashId) {
      this.axios
        .post(this.baseUrl + "/financial/auditWithDrawCash", {
          loginToken: this.$store.state.loginToken,
          authorType: 1,
          status: 1,
          withdrawCashId: withdrawCashId
        })
        .then(response => {
          if (response.data.code == 0) {
            this.$message.success("审核成功");
            this.search();
          }
        });
    },

    // 合作方提现审核--拒绝
    refuseCash() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/financial/auditWithDrawCash", {
          loginToken: this.$store.state.loginToken,
          authorType: 1,
          reason: values.reason,
          status: 0,
          withdrawCashId: this.refuseCashId
        })
        .then(response => {
          if (response.data.code == 0) {
            this.$message.success("已拒绝申请");
            this.search();
          }
        });
    },

    // 更新提现记录状态--代理商
    updateWithdrawCash() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/financial/updateWithdrawCash", {
          loginToken: this.$store.state.loginToken,
          id: this.updateWithdrawCashId,
          status: 3
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            this.$message.success("已打款成功");
            this.search();
          }
        });
    },

    //代理商导出
    AgentExport() {
      var values = this.form.getFieldsValue();
      if (values.rangeConfig == undefined) {
        values.rangeConfig == undefined;
      } else {
        this.startTime = this.$moment(values.rangeConfig[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = this.$moment(values.rangeConfig[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(
          this.baseUrl + "/financial/exportAgentWithDrawCashList",
          {
            loginToken: this.$store.state.loginToken,
            agentName: values.workNumber,
            status: values.activationStatus,
            endTime: this.endTime,
            startTime: this.startTime,
            workOrderCode: values.workNum,
            type: 2
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "代理商提现表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //合作方提现查询
    partsearch($event) {
      if($event){
        this.pagination.current=1
      }
      var values = this.form.getFieldsValue();
      //对时间进行判断一下
      if (values.rangeConfig == undefined) {
        values.rangeConfig == undefined;
      } else {
        this.startTime = this.$moment(values.rangeConfig[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = this.$moment(values.rangeConfig[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/partnerFinancial/findWithDrawCashPageList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          endTime: this.endTime,
          startTime: this.startTime,
          workOrderCode: values.workNum,
          partnerName: values.workNumber,
          status: values.auditStatus,
          type: 3
        })
        .then(response => {
          // console.log(response.data);
          console.log(response.data.data);
          this.dataa = response.data.data.t.list;
          //可提现金额
          this.accountBalance = response.data.data.t.accountBalance;
          //锁定金额
          this.lockAmount = response.data.data.t.lockAmount;
          //  合作方收入总金额
          this.partnerInAmount = response.data.data.t.partnerInAmount;
          //已提现金额
          this.settledAmount = response.data.data.t.settledAmount;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(erro => {
          console.log(erro);
        });
    },

    // 更新提现记录状态--合作方
    updatePartner() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/partnerFinancial/updateWithdrawCash", {
          loginToken: this.$store.state.loginToken,
          id: this.updatePartnerId,
          status: 3
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            this.$message.success("已打款成功");
            this.partsearch();
          }
        });
    },

    //合作方导出
    partExport() {
      var values = this.form.getFieldsValue();
      if (values.rangeConfig == undefined) {
        values.rangeConfig == undefined;
      } else {
        this.startTime = this.$moment(values.rangeConfig[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = this.$moment(values.rangeConfig[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(
          this.baseUrl + "/partnerFinancial/exportWithDrawCashList",
          {
            loginToken: this.$store.state.loginToken,
            endTime: this.endTime,
            startTime: this.startTime,
            workOrderCode: values.workNum,
            partnerName: values.workNumber,
            status: values.auditStatus,
            type: 3
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "合作方提现表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    }
  },
  created() {
    this.search();
  }
};
</script>

<style scoped>
.dai {
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.298039215686275);
  line-height: 18px;
}
.et {
  float: right;
}
</style>
